<template>
	<view style="height: 100%;padding-bottom: 120rpx; background-color: #FFFFFF;">
		<!-- <top-bar :backFlag="isBack" :indexScrollTopFlag="indexScrollTopFlag"></top-bar> -->
		<!-- <view class="dingwei-txt">
			贵阳<span class="iconfont icon-xiajiantou" style="font-weight: bold;"></span>
		</view> -->
		<view class="ctn">
			<map class="map-box" :latitude="location.latitude" :longitude="location.longitude" :markers="markers"></map>
			<view class="form-box">
				<view class="btn-box">
					<view class="btn-item" :class="btnActived===1?'btn-actived':''" @click="changeBtn(1)">市内</view>
					<view class="btn-item" :class="btnActived===2?'btn-actived':''" @click="changeBtn(2)">跨城</view>
				</view>
				<view class="start-item" @click="toSearch(1)">
					<view class="start-item-icon"></view>
					<input class="uni-input start-item-cnt" placeholder="从哪儿出发" disabled="disable" v-model="startPosition.showAddress" />
				</view>
				<view class="line"></view>
				<view class="end-item" @click="toSearch(2)">
					<view class="end-item-icon"></view>
					<input class="uni-input end-item-cnt" placeholder="你要去哪儿"  disabled="disable" v-model="endPosition.showAddress"/>
				</view>
			</view>
		</view>
		<!-- 底部导航距离，做兼容处理的-->
		<view v-if="bottomNavigationIsCustom" class="footerBottom"></view>
		<!-- 底部菜单 -->
		<sfcTabBar></sfcTabBar>
	</view>
</template>

<script>
	import sfcTabBar from '@/components/pageFooter/sfc.vue';
	import {geocoder} from '@/api/api.js';
	import {
		mapGetters
	} from "vuex";
	
	export default {
		computed: mapGetters(['isLogin', 'uid', 'globalData', 'bottomNavigationIsCustom']),
		components:{
			sfcTabBar
		},
		data() {
			return {
				isBack: true,
				indexScrollTopFlag:false,
				location: {
					longitude: null,
					latitude: null
				},
				markers:[
					{
						id:0,
						longitude: null,
						latitude: null,
						title:'我的位置',
						iconPath:'/static/img/map-ico.png',
						width: 25,
						height: 30
					}
				],
				btnActived:1,
				cityInner: true,
				startPosition:{
					showAddress:'从当前位置出发',
					longitude: null,
					latitude: null
				},
				endPosition:{
					showAddress:'',
					longitude: null,
					latitude: null
				},
				jumpTimer:null
			}
		},
		onLoad() {
			// 当前定位
			this.currentLocation();
			uni.$on('positionSelected', this.updatePosition);
		},
		methods: {
			// 定位
			currentLocation() {
				let that = this;
				uni.getLocation({
					// 默认为 wgs84 返回 gps 坐标，gcj02 返回国测局坐标，可用于 uni.openLocation 和 map 组件坐标，App 和 H5 需配置定位 SDK 信息才可支持 gcj02。
					type: 'gcj02',
					isHighAccuracy: true,
					success: function(res) {
						console.log('gcj02=',res)
						that.location.longitude = res.longitude;
						that.location.latitude = res.latitude;
						that.markers[0].latitude = res.latitude;
						that.markers[0].longitude = res.longitude;
						// 经纬度转地址
						that.geocoder(res.latitude, res.longitude);
					},
					fail: function(res) {
						console.log('定位失败')
					}
				})
			},
			// 经纬度转地址
			geocoder(latitude, longitude){
				geocoder(latitude,longitude).then(res=>{
					if(200 === res.code){
						this.markers[0].title = res.data.roughAddress ? res.data.roughAddress:res.data.recommendAddress;
						this.startPosition = {
							latitude: latitude,
							longitude: longitude,
							showAddress: res.data.roughAddress ? res.data.roughAddress:res.data.recommendAddress,
							fullAddress: res.data.address,
							province: res.data.province,
							city: res.data.city,
							district: res.data.district,
							street: res.data.street,
							startDetail: res.data.street_number
						}
					}
				}).catch(res=>{
					
				})
			},
			// 切换市内、跨城
			changeBtn(n){
				this.btnActived = n;
				this.cityInner = 1===n;
			},
			// 到地址搜索页面
			toSearch(n){
				clearTimeout(this.jumpTimer);
				this.jumpTimer = setTimeout(()=>{
					uni.navigateTo({
						url:'/pages/xyqc/sfc/client/search?n=' + n + '&lat=' + this.startPosition.latitude + '&lng=' + this.startPosition.longitude
					})
				},200)
			},
			// 监听搜索页选择的地址
			updatePosition(e){
				console.log('接收搜索页数据：',e)
				if(1===e.n){
					this.startPosition = e.item;
				}
				else {
					this.endPosition = e.item;
				}
				// 如果起点和终点都选好了、就立即进入发布行程页面
				if(this.startPosition.showAddress && this.endPosition.showAddress){
					// 缓存行程数据、行程页面去出来用
					let param = {
						cityInner: this.cityInner,
						startPosition: this.startPosition,
						endPosition: this.endPosition
					}
					uni.setStorageSync('tripData', param);
					clearTimeout(this.jumpTimer);
					this.jumpTimer = setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/xyqc/sfc/client/publish-trip'
						})
					},300)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		display: flex;
		flex-direction: column;
		width: 100%;
		// height: 100% !important;
	}
	.ctn{
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}
	.map-box{
		flex: 1;
		width: 100%;
	}
	.form-box{
		width: 100%;
		height: 388rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
	}
	.btn-box{
		height: 91rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}
	.btn-item{
		height: 47rpx;
		font-size: 33rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
	}
	.btn-actived{
		border-radius: 3rpx;
		border-bottom: 6rpx solid #6FC65E;
	}
	.start-item{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.start-item-icon{
		width: 17rpx;
		height: 17rpx;
		background: #6FC65E;
		border-radius: 16rpx;
	}
	.start-item-cnt{
		padding-left: 28rpx;
		flex: 1;
		height: 41rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 41rpx;
		
	}
	.line{
		margin-left: 45rpx;
		height: 1rpx;
		border-bottom: 1rpx solid #DFDFDF;
	}
	.end-item{
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.end-item-icon{
		width: 17rpx;
		height: 17rpx;
		background: #EC7F2F;
		border-radius: 16rpx;
	}
	.end-item-cnt{
		padding-left: 28rpx;
		flex: 1;
		height: 41rpx;
		font-size: 29rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 41rpx;
	}
	
	
	.dingwei-txt {
		margin-top: var(marTop + 'px');
		height: 100rpx;
		line-height: 100rpx;
		padding-left: 30rpx;
		font-size: 33rpx;
		font-weight: 400;
		color: #333333;
	}
</style>
